<div class="row-fluid">
    <div class="span8">
        <div class="row-fluid">
            <div class="span9">
                <div ng-include="'/static/partials/shared/_host_action_bar.html'"/>
            </div>
            <div class="span3">
                <span>每页显示</span>
                <select class="input-mini" ng-model="page_size" ng-options="pz for pz in page_sizes"
                        ng-change="change(page_size)">
                </select>
                <span>条</span>
            </div>
        </div>
        <table class="table table-bordered table-condensed" tableorder="hosts">
            <thead>
            <tr>
                <!--<th><input type="checkbox" ng-model="selected_all"/></th>-->
                <th by='name'>名称</th>
                <th>IP</th>
                <th by='cpu_usage'>CPU使用率</th>
                <th by='mem_usage'>内存使用率</th>
                <th by='cpu'>CPU核数</th>
                <th by='mem'>内存</th>
                <th>架构</th>
                <th>集群</th>
                <th by='instance_set.length'>实例</th>
                <th by='status'>状态</th>
                <td>操作</td>
            </tr>
            </thead>
            <tbody>
            <tr ng-click="show_details()" selectable="host" ng-repeat="host in hosts|activeitem|orderBy:orderfield:reverse">
                <!--<td><input type="checkbox" value="{{ host.id }}" ng-model="selected[host.id]"/></td>-->
                <td>
                    <a href="#/host/{{ host.id }}">{{ host.host_name }}</a>
                </td>
                <td>{{ host.ip }}</td>
                <td>
                    <div class="progress">
                        <span class="green"
                              style="width: {{ host.cpu_usage }}%;"><span>{{ host.cpu_usage }}%</span></span>
                    </div>

                </td>
    <td>
        <div class="progress">
            <span class="blue" style="width: {{ host.mem_usage }}%;"><span>{{ host.mem_usage }}%</span></span>
        </div>
    </td>
    <td>{{ host.cpu }}</td>
    <td>{{ host.mem *1024 * 1024| bytes}}</td>
    <td>{{ host.arch }}</td>
    <td>{{ host.cluster.name }}</td>
    <td>
        <a href="#/host/{{ host.id }}#vms">
        {{ host.instance_set.length }}
            </a>
    </td>
    <td>
        <img src="/static/images/icon/server_unactive.png" class="img-size" alt="未激活" ng-show="host.status==1"/>
        <img src="/static/images/icon/server_stop.png" class="img-size" alt="离线" ng-show="host.status==3"/>
        <img src="/static/images/icon/server_ok.png" class="img-size" alt="正常" ng-show="host.status==2"/>
        <img src="/static/images/icon/server_maintain.png" class="img-size" alt="维护" ng-show="host.status==0"/>
        <img src="/static/images/loading.gif" class="img-size16" alt="操作中" ng-show="host.status==4"/>
    </td>
    <td>
        <button class="btn btn-primary btn-mini" ng-click="link_ssh(host)">ssh连接</button>
    </td>
    </tr>
    </tbody>
    </table>
    <div class="pagination">
        <ul>
            <li ng-hide="should_hide()" ng-class="prev_class" ng-click="prev()"><a href="javascript:void(0);">上一页</a>
            </li>
            <li ng-repeat="i in [] | range:page_count()" ng-hide="should_hide()" ng-click="page(i)"
                ng-class="(i == current_page) && 'active'">
                <a href="javascript:void(0)">{{ i + 1}}</a>
            </li>
            <li ng-hide="should_hide()" ng-class="next_class" ng-click="next()"><a href="javascript:void(0);">下一页</a>
            </li>
        </ul>
    </div>
</div>
<div class="span4" ng-show="selected_host">
    <div class="well">
        <div class="row-fluid ">
            <div class="span3">主机名:</div>
            <div class="span3">{{ selected_host.host_name }}</div>
            <div class="span3">操作系统:</div>
            <div class="span3">{{ selected_host.os }}</div>

        </div>
        <div class="row-fluid ">
            <div class="span3">hypervisor:</div>
            <div class="span3">{{ selected_host.hypervisor }}</div>
            <div class="span3">活动实例:</div>
            <div class="span3">{{ selected_host.running_vms.length }}</div>
        </div>
        <div class="row-fluid ">
            <div class="span3">内存共享:</div>
            <div class="span3">{{ selected_host.memshare |yesorno}}</div>
        </div>
        <div class="row-fluid ">

            <div class="span3">CPU类型:</div>
            <div class="span9">{{ selected_host.cpu_type }}</div>
        </div>
    </div>
</div>
</div>